/*-----------------------------------------------------------------------------
  [CSS - Layout]

  Feuille de style pour le positionnement des éléments
  
  1. Global
  2. Game Area
  	2.1. Main Menu
  3. Shortcut Icons
  
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------
[1. Global]
*/
html {
	background-color: #000;
}

@font-face {
    font-family: 'first_orderregular';
    src: url('fonts/firstv2-webfont.eot');
    src: url('fonts/firstv2-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/firstv2-webfont.woff') format('woff'),
         url('fonts/firstv2-webfont.ttf') format('truetype'),
         url('fonts/firstv2-webfont.svg#first_orderregular') format('svg');
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
}

input {
	font-family: 'first_orderregular';
}

body {
	color:#FFF; 
	font-family: 'first_orderregular';
    font-size: 20px;
}

p {
	margin: 0;
}

.hide {
	display: none;
}

.shortcut {
	cursor: pointer;
	height: 128px;
	width: 128px;
}

.close {
	cursor: pointer;
	font-family: Arial;
	margin:5px;
	position:absolute; 
	right:0px; 
	width:20px; 
}

.row {
	clear: both;
	margin: auto;
	overflow: hidden;
}

	.row .block {
		float: left;
		margin: 50px 40px 0 40px;	
	}

.shortcut:hover {
	opacity: 0.7;
}

/*---------------------------------------------------------------------
[2. Game Area]
*/
#gameArea {
	height:438px;
	margin:auto; 
	margin-top:10%; 
	position:relative; 
	text-align:center; 
	width:960px; 
}
	
	/*---------------------------------------------------------------------
	[2.1. Main Menu]
	*/
	#gameArea #main_menu  {
		position:absolute;
		width: 100%;
		height: 100%;
		background: url('../img/menus/Background-Interface.png') no-repeat transparent;
		z-index:1;
	}

		#gameArea #main_menu #shortcuts {
			background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 28%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.95) 72%, rgba(0,0,0,0) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0.95)), color-stop(50%,rgba(0,0,0,1)), color-stop(72%,rgba(0,0,0,0.95)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* IE10+ */
			background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			height: 100%;
			margin: auto;
			width: 100%;
		}

			#gameArea #main_menu #shortcuts .row {
				width: 416px;
			}

				#gameArea #main_menu #shortcuts .shortcut {
					/*opacity: 0.95;*/
				}

		#gameArea #main_menu .sub_menu {
			background: #AFAFAF;
			height: 100%;
			margin: auto;
			position: relative;
			width: 70%;
			z-index:10;
		}

		#gameArea #main_menu .sub_menu {
			background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 28%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.95) 72%, rgba(0,0,0,0) 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0.95)), color-stop(50%,rgba(0,0,0,1)), color-stop(72%,rgba(0,0,0,0.95)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
			background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* IE10+ */
			background: linear-gradient(135deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 28%,rgba(0,0,0,1) 50%,rgba(0,0,0,0.95) 72%,rgba(0,0,0,0) 100%); /* W3C */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			height: 100%;
			margin: auto;
			width: 100%;
			position: relative;
			z-index:10;
		}

/*---------------------------------------------------------------------
[3. Shortcut Icons]
*/
div.shortcut.add_spell {
	background: url('../img/icon/add_spell.png') no-repeat transparent;
}

div.shortcut.lock {
	background: url('../img/icon/lock.png') no-repeat transparent;
	cursor: default;
}